<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<%@ include file="/module/common.jsp" %>
<script>
var CONFIG = {};
CONFIG["baseUrl"] = '${urlPath}';
CONFIG["libPath"] = "${libPath}";
CONFIG['modulePath'] = '${modulePath}';
CONFIG['imagePath'] = '${imagePath}';
</script>
<script src="${libPath}dicts.js?v=1.3"></script>
<script>
//数据字典
DictMan.fetch();
</script>
<script src="${libPath}utils/underscore-min.js"></script>
<script src="${libPath}utils/require.js"></script>
	<script src="${libPath}utils/require-config.js"></script>
<link rel="stylesheet" type="text/css" href="${modulePath}datastat/css/index.css?v=1.4">
<style>
.grid {
	height: 100%;
	display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
	grid-template-rows: 50% 50%;
	margin: 20px auto 0px auto;
}

.chart-title {
  text-align: center;
  color: #bcc0c6;
	font-size: 1.1em;
	flex-shrink: 0;
	height: 24px;
	width: 100%;
}
.totals {
  position: relative;
  width: 50%;
  height: 100%;
  margin: 10% auto;
}
.totals > .numbers {
  width: 100%;
}
.totals > .numbers > div {
  position: relative;
  width: 90%;
  height: 54px;
  margin: 0px auto;
  color: #fff;
}
.totals > .top-border {
  height: 20px;
  background: url(/module/datastat/img/top-border.png) no-repeat;
  background-size: contain;
}
.totals > .bottom-border {
  height: 20px;
  background: url(/module/datastat/img/bottom-border.png) no-repeat;
  background-size: contain;
}

.totals > .numbers > div > div:nth-child(1) {
  position: absolute;
  left: 0px;
  width: 30%;
  height: 100%;
  line-height: 54px;
}

.totals > .numbers > div > div:nth-child(2) {
  position: absolute;
  right: 0px;
  width: 70%;
  height: 100%;
  text-align: right;
}
.totals > .numbers > div > div:nth-child(2) > span:nth-child(1) {
  font-size: 2em;
  line-height: 54px;
}

.service-need-rank {
	color: #eee;
	display: grid;
	grid-template-rows: repeat(5, 15%);
	width: 100%;
	margin: 0 auto;
}
.service-need-rank > div {
	position: relative;
  width: 90%;
  margin: 0px auto;
  background-color: rgba(14, 85, 107, 0.3);
}
.service-need-rank > div > div {
	top: 50%;
  transform: translateY(-50%);
}
.service-need-rank > div > div:nth-child(1) {
  position: absolute;
  left: 20px;
  width: 10%;
}

.service-need-rank > div > div:nth-child(2) {
  position: absolute;
  left: 80px;
  width: 50%;
}

.service-need-rank > div > div:nth-child(3) {
  position: absolute;
  right: 0px;
  width: 20%;
	font-weight: bold;
}

.service-state {
  position: relative;
  width: 100%;
  height: 80%;
}
.service-state > div {
  position: absolute;
  float: left;
  border: 10px solid transparent;
  -moz-border-image:url(/module/datastat/img/servicestate-border.png) round;   /* Old Firefox */
  -webkit-border-image:url(/module/datastat/img/servicestate-border.png) 8 round;    /* Safari and Chrome */
  -o-border-image:url(/module/datastat/img/servicestate-border.png) 8 round;     /* Opera */
  border-image:url(/module/datastat/img/servicestate-border.png) 8 round;
}
</style>
</head>
<body>
	
	<div id="charts-layout" class="charts-bg" style="overflow: hidden;">
		<div id="charts">
			<div class="title">
					<div class="main-title"> 
					</div>
			</div>
			<div class="grid">
				<div>
					<div class="chart" id="pic1"></div>
				</div>
				<div>
					<div class="totals">
						<div class="top-border"></div>
						<div class="numbers">
							<div>
								<div>服务量</div>
								<div><span id="serviceTotal">0</span><span>次</span></div>
							</div>
								<div>
									<div>客户量</div>
									<div><span id="customerTotal">0</span><span>人</span></div>
								</div>
							</div>
							<div class="bottom-border"></div>
					</div>
				</div>
				<div>
					<div class="chart" id="pic3"></div>
				</div>
				<div style="display: flex;flex-wrap: wrap;">
					<div class="chart-title">客户服务需求TOP5</div>
					<div class="chart service-need-rank"></div>
				</div>
				<div>
					<div class="chart-title">服务状态</div>
					<div class="service-state"></div>
				</div>
				<div>
					<div class="chart" id="serviceCategory"></div>
				</div>
			</div>
		</div>
	</div>
	<script>
	var nowAdminUsername = '${curAdmin.username}';//临时代码
	</script>
    <script src="${modulePath}datastat/js/common.js?v=1"></script>
    <script src="${modulePath}datastat/js/servicestat.js?v=1.4"></script>
</body>
</html>
